const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    //模式
    mode:'development',

    //入口
    entry:'./src/index.js',

    // 输出
    output:{
        path: path.resolve(__dirname,'./dist'),
        filename:'bundle.js'
    },
    // 模块处理规则
    module:{
        rules: [
            {
                test:/\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
            {
                test:/\.(png|jpg|svg|eot|ttf|woff)$/,
                type:'asset' // asset modules
            },
            {
                // 处理 js、mjs 文件
                test: /\.m?js$/,
                // 配置 babel-loader
                use: {
                    // loader 的名称
                    loader: 'babel-loader',

                    // loader 的配置
                    options: {
                        // babel 的预设配置
                        presets: ['@babel/preset-env'],
                        // babel 的插件
                        plugins: ['@babel/plugin-transform-runtime']
                    }
                },
                // 忽略处理那些通过包管理器安装的代码目录，否则会非常缓慢
                exclude: /(node_modules|bower_components)/
            },
            
        ]
    },
    // 插件配置项
    plugins:[
        new MiniCssExtractPlugin(),
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            // 页面模板
            template: 'index.html'
        })
    ],
    // 开发服务器
    devServer: {
        // 资源目录
        static: {
            directory: path.join(__dirname, 'dist')
        },
        // 服务器端口
        port: 9000,
        // 启用压缩
        compress: true,
        // 启用 HMR 模块热更新
        hot: true,
    },
    // 生成调试文件
    devtool: 'source-map',
} 